<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'create.jsp' starting page</title>

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<jsp:include page="/WEB-INF/jsp/inc/include-easyUI.jsp"></jsp:include>
<!-- 弹出框 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/plugins/sweetalert/dist/sweetalert.css">
<script src="${pageContext.request.contextPath}/static/plugins/sweetalert/dist/sweetalert.min.js"></script>

<!-- 表单验证 -->
<!--     <link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/vendor/bootstrap/css/bootstrap.css"/> -->
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/dist/css/bootstrapValidator.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/vendor/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/static/plugins/bootstrapValidator/dist/js/bootstrapValidator.js"></script>

<script src="${pageContext.request.contextPath}/static/assets/js/bootstrap.min.js"></script>

<script type="text/javascript">
	$(function() {
		$('#addConsumeInfoForm').bootstrapValidator({
			message : '这个值不能为空！',
			feedbackIcons : {
				valid : 'glyphicon glyphicon-ok',
				invalid : 'glyphicon glyphicon-remove',
				validating : 'glyphicon glyphicon-refresh'
			},
			fields : {
				consumeItemId : {
					message : '消费项目不能为空',
					validators : {
						notEmpty : {
							message : '消费项目不能为空'
						},
					}
				},
				consumeMoney : {
					validators : {
						notEmpty : {
							message : '消费金额不能为空'
						},
						numeric : {
							message : '消费金额只能数字'
						},
						regexp: {
	                        regexp: /^\d{0,8}\.{0,1}(\d{1,2})?$/,
	                        message: '小数点不能超过两位'
	                    }
					}
				},
				description : {
					
				}
			}
		});
	});
</script>
</head>

<body>
	<div class="main-content">
				<div class="breadcrumbs" id="breadcrumbs">
					<script type="text/javascript">
		 				try { 
		 					ace.settings.check('breadcrumbs', 'fixed') 
		 				} catch (e) { 
		 				} 
					</script> 
					<ul class="breadcrumb">
						<li><a href="javascript:void(0);">日常消费管理</a></li>
						<li class="active">添加</li>
					</ul>
				</div>
		<div class="page-content">
			<div class="page-header">
				<h1>日常消费信息</h1>
			</div>
			<!-- /.page-header -->
			<div class="row">
				<div class="col-xs-12">
					<!-- PAGE CONTENT BEGINS -->
					
						<form id="addConsumeInfoForm" class="form-horizontal" role="form" style="margin: 0px;" 
								method="POST" enctype="multipart/form-data">
							<input type="hidden" name="consumeType" value="EVERY_CONSUME"/>
							<input type="hidden" name="payerUserId" value="${activeUser.id }"/>
							<div class="space-12"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="add-consume-pagerUserName"> 付款人：</label>
								<div class="col-sm-4">
									<input type="text" name="pagerUserName" id="add-consume-pagerUserName" class="form-control" 
										value="${activeUser.userName }" readonly="true"/>
								</div>
							</div>
							<div class="space-8"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="add-consume-consumeItemId"> 消费项目：</label>
								<div class="col-sm-4">
									<input type="text" name="consumeItemId" id="add-consume-consumeItemId" placeholder="消费项目" class="form-control" 
										style="height:30px;width: 350px;"/>
								</div>
							</div>
							<div class="space-8"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="add-consume-consumeMoney"> 消费金额(￥)：</label>
								<div class="col-sm-4">
									<input type="text" name="consumeMoney" id="add-consume-consumeMoney" placeholder="消费金额" class="form-control" />
								</div>
							</div>
							<div class="space-8"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="add-consume-consumeUserIds"> 消费人员：</label>
								<div class="col-sm-4">
									<input type="text" name="consumeUserIds" id="add-consume-consumeUserIds" placeholder="消费人员" class="form-control" 
										style="height:30px;width: 350px;"/>
								</div>
							</div>
							<div class="space-8"></div>
							<div class="form-group">
								<label class="col-sm-3 control-label no-padding-right" for="add-consume-description"> 描述：</label>
								<div class="col-sm-4">
									<textarea class="form-control"  name="description" id="add-consume-description"
									 placeholder="描述" style="height: 99px;"></textarea>
								</div>
							</div>
							<div class="space-8"></div>
							<div class="form-group">
								<label class="col-lg-3 control-label no-padding-right"
									for="previewImg"> 账单图片：</label>
								<div class="col-sm-4">
									<div id="preview">
										<img id="imghead" border="0" src="static/imgs/photo_icon.png"
											width="90" height="90" onclick="$('#previewImg').click();">
									</div>
									<input type="file" name="checkImgs" onchange="previewImage(this)"
										style="display: none;" id="previewImg" accept="image/png, image/jpeg, image/gif, image/jpg">
								</div>
							</div>
							<div class="space-24"></div>
							<div class="col-lg-6 col-lg-offset-5">
								<button type="button" class="btn btn-default" id="reset_addConsumeInfo" data-dismiss="modal">重置</button>
								<button type="button" class="btn btn-primary" id="submit_addConsumeInfo">确定</button>
							</div>
						</form>
						
					<!-- PAGE CONTENT ENDS -->
				</div>
				<!-- /.col -->
			</div>
			<!-- /.row -->
		</div>
		<!-- /.page-content -->
	</div>
	<!-- /.main-content -->
		
<script type="text/javascript">
$(function () {
    $("#add-consume-consumeItemId").combobox({
	    url:'${pageContext.request.contextPath}/admin/consumeItem/getConsumeItemComboList',
	    valueField:'value',
	    textField:'text',
	});
	$("#add-consume-consumeUserIds").combobox({
	    url:'${pageContext.request.contextPath}/admin/sys/user/getUserComboList?userId=0',
	    valueField:'value',
	    textField:'text',
	    multiple:true,
	});
	$('#add-consume-consumeUserIds').combobox('setValue', '${activeUser.id }');
	
    $('#reset_addConsumeInfo').click(function(){
	    $('#addConsumeInfoForm').data('bootstrapValidator').resetForm(true);
	    $("#add-consume-consumeItemId").combobox('clear');	
		$('#preview').empty();
		$('#preview').html('<img id="imghead" border="0" src="static/imgs/photo_icon.png" width="90" height="90" onclick="$(\'#previewImg\').click();">');    	
    })

	$('#submit_addConsumeInfo').click(function(){
		var consumeItemId = $("#add-consume-consumeItemId").combobox('getValue');	
		if(!consumeItemId){
			top.alertMsg('错误', '请选择消费项目！');
			return false;
		}
		var consumeUserIds = $("#add-consume-consumeUserIds").combobox('getValue');	
		if(!consumeUserIds){
			top.alertMsg('错误', '请选择消费人员！');
			return false;
		}
		var f = $('#addConsumeInfoForm');
		f.data('bootstrapValidator').validate();
		var isValid = f.data('bootstrapValidator').isValid();
		if(!isValid){
			return false;
		}
		var toUrl='${pageContext.request.contextPath}/admin/consumeRecord/create';
		var f = $('#addConsumeInfoForm');
			f.form('submit', {
			    url: toUrl,
			    onsubmit: function () {
			        var flag = $(this).form('validate');
			        if (flag) {
			            top.showProcess(true, '温馨提示', '正在提交数据...');
			        }
			        return flag;
			    },
			    success: function (data) {
			        var map = $.parseJSON(data);
			        if (map.success) {
			        	window.location.href='${pageContext.request.contextPath}/admin/consumeRecord/everyConsume/index'
			        } else {
			        	top.alertMsg('错误', map.msg);
			        }
			    },
			    onLoadError: function () {
			        top.showProcess(false);
			        top.$.messager.alert('温馨提示', '由于网络或服务器太忙，提交失败，请重试！');
			    }
			});
	});
});
</script>
<!-- 预览图片 -->
<script type="text/javascript">
//编辑时
function edit_previewImage(file) {
	var MAXWIDTH = 90;
	var MAXHEIGHT = 90;
	var div = document.getElementById('edit_preview');
	if (file.files && file.files[0]) {
		div.innerHTML = '<img id=edit_imghead onclick=$("#edit_previewImg").click()>';
		var img = document.getElementById('edit_imghead');
		img.onload = function() {
			var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT,
					img.offsetWidth, img.offsetHeight);
			img.width = rect.width;
			img.height = rect.height;
			//         img.style.marginLeft = rect.left+'px';
			img.style.marginTop = rect.top + 'px';
		}
		var reader = new FileReader();
		reader.onload = function(evt) {
			img.src = evt.target.result;
		}
		reader.readAsDataURL(file.files[0]);
	} else //兼容IE
	{
		var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
		file.select();
		var src = document.selection.createRange().text;
		div.innerHTML = '<img id=edit_imghead>';
		var img = document.getElementById('edit_imghead');
		img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
		var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth,
				img.offsetHeight);
		status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width
				+ ',' + rect.height);
		div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
	}
}
//创建时
//图片上传预览    IE是用了滤镜。
function previewImage(file) {
	var MAXWIDTH = 90;
	var MAXHEIGHT = 90;
	var div = document.getElementById('preview');
	if (file.files && file.files[0]) {
		div.innerHTML = '<img id=imghead onclick=$("#previewImg").click()>';
		var img = document.getElementById('imghead');
		img.onload = function() {
			var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT,
					img.offsetWidth, img.offsetHeight);
			img.width = rect.width;
			img.height = rect.height;
			//         img.style.marginLeft = rect.left+'px';
			img.style.marginTop = rect.top + 'px';
		}
		var reader = new FileReader();
		reader.onload = function(evt) {
			img.src = evt.target.result;
		}
		reader.readAsDataURL(file.files[0]);
	} else //兼容IE
	{
		var sFilter = 'filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
		file.select();
		var src = document.selection.createRange().text;
		div.innerHTML = '<img id=imghead>';
		var img = document.getElementById('imghead');
		img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
		var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth,
				img.offsetHeight);
		status = ('rect:' + rect.top + ',' + rect.left + ',' + rect.width
				+ ',' + rect.height);
		div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
	}
}

function clacImgZoomParam(maxWidth, maxHeight, width, height) {
	var param = {
		top : 0,
		left : 0,
		width : width,
		height : height
	};
	if (width > maxWidth || height > maxHeight) {
		rateWidth = width / maxWidth;
		rateHeight = height / maxHeight;

		if (rateWidth > rateHeight) {
			param.width = maxWidth;
			param.height = Math.round(height / rateWidth);
		} else {
			param.width = Math.round(width / rateHeight);
			param.height = maxHeight;
		}
	}
	param.left = Math.round((maxWidth - param.width) / 2);
	param.top = Math.round((maxHeight - param.height) / 2);
	return param;
}
</script>
</body>
</html>
